<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../css/tests.css">
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script src="../../../dist/js/epoch.js"></script>
        <script src="../js/data.js"></script>
        <link rel="stylesheet" type="text/css" href="../../../dist/css/epoch.css">
    </head>
    <body>
        <h1>Real-time Heatmap Plot Test</h1>
        <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> &raquo; Real-time Heatmap</p>
        <ol>
            <li><a href="#test-1">Single Series - Normal</a></li>
            <li><a href="#test-2">Single Series - Beta</a></li>
            <li><a href="#test-3">Single Series - Normal, Single Update</a></li>
            <li><a href="#test-4">Single Series - Beta, Stream Update</a></li>
            <li><a href="#test-5">Single Series - Color Override</a></li>
            <li><a href="#test-6">Multi Series - Normal + Beta</a></li>
            <li><a href="#test-7">Multi Series Color Override</a></li>
            <li><a href="#test-8">Range Independent Bucketing</a></li>
            <li><a href="#test-9">Option: buckets</a></li>
            <li><a href="#test-10">Option: bucketRange</a></li>
            <li><a href="#test-11">Option: bucketPadding</a></li>
            <li><a href="#test-12">Option: cutOutliers</a></li>
            <li><a href="#test-13">Option: opacity</a></li>
            <li><a href="#test-14">Show/Hide Layer</a></li>
        </ol>

        <!-- Test 1 -->
        <div id="test-1" class="test">
            <h2>1. Single Series - Normal</h2>
            <p>Select random values from the normal distribution and display them with the heatmap.</p>
            <div class="epoch"></div>
        </div>
        <script>
        $(function() {
            var data = new NormalData(1);
            $('#test-1 .epoch').epoch({
                type: 'time.heatmap',
                data: data.history(120),
                windowSize: 120,
                buckets: 20
            });
        });
        </script>

        <!-- Test 2 -->
        <div id="test-2" class="test">
            <h2>2. Single Series - Beta </h2>
            <p>Select random values from the Beta(2, 5) distribution and display them with the heatmap.</p>
            <div class="epoch"></div>
        </div>
        <script>
        $(function() {
            var data = new BetaData(2, 5, 1);
            $('#test-2 .epoch').epoch({
                type: 'time.heatmap',
                data: data.history(120),
                windowSize: 120,
                buckets: 20
            });
        });
        </script>

        <!-- Test 3 -->
        <div id="test-3" class="test">
            <h2>3. Single Sieres - Normal, Single Update</h2>
            <p>
                Plot the normal distribution and transition a new element when the button is pressed.
            </p>
            <div class="epoch"></div>
            <p><button>Next</button></p>
        </div>
        <script>
        $(function() {
            var data = new NormalData(1);
            var chart = $('#test-3 .epoch').epoch({
                type: 'time.heatmap',
                data: data.history(120),
                windowSize: 120,
                buckets: 20
            });
            $('#test-3 button').on('click', function(e) {
                chart.push(data.next());
            });
        });
        </script>

        <!-- Test 4 -->
        <div id="test-4" class="test">
            <h2>4. Single Series - Beta, Stream Update</h2>
            <p>
                Plot the Beta(2, 5) distribution and begin streaming new elements each second once the
                button is pressed.
            </p>
            <div class="epoch"></div>
            <button>Play</button>
        </div>

        <script>
        $(function() {
            var data = new BetaData(2, 5, 1),
                interval = null;
            var chart = $('#test-4 .epoch').epoch({
                type: 'time.heatmap',
                data: data.history(120),
                windowSize: 120,
                buckets: 20
            });
            $('#test-4 button').on('click', function(e) {
                if (interval === null) {
                    chart.push(data.next());
                    interval = setInterval(function() {
                        chart.push(data.next());
                    }, 1000);
                    $(e.target).text('Pause');
                }
                else {
                    clearInterval(interval);
                    interval = null;
                    $(e.target).text('Play');   
                }
            });
        });
        </script>

        <!-- Test 5 -->
        <div id="test-5" class="test">
            <h2>5. Single Series - Color Override</h2>
            <p>Change the bucket base color to orange and plot the Beta(2, 2) distribution.</p>
            <div id="test-5-plot" class="epoch"></div>
        </div>

        <style>
        #test-5-plot .a rect.bucket { fill: darkorange; }
        </style>

        <script>
        $(function() {
            var data = new BetaData(2, 2, 1);
            $('#test-5 .epoch').epoch({
                type: 'time.heatmap',
                data: data.history(120),
                windowSize: 120,
                buckets: 20
            });
        });
        </script>

        <!-- Test 6 -->
        <div id="test-6" class="test">
            <h2>6. Multi Series - Normal + Beta</h2>
            <p>
                Plot the Beta(2,5) and Normal distributions as two layers in a single heatmap. Stream elements to the plot
                by pressing the button. The normal distribution layer is in blue and the beta in green.
            </p>
            <div class="epoch"></div>
            <button>Play</button> 
        </div>
        <script>
        $(function() {
            var normal = new NormalData(1),
                normalData = normal.history(120)[0],
                beta = new BetaData(2, 5, 1),
                betaData = beta.history(120)[0],
                data = [normalData, betaData],
                interval = null;

            var chart = $('#test-6 .epoch').epoch({
                type: 'time.heatmap',
                data: data,
                windowSize: 120,
                buckets: 20
            });

            function pushNext() {
                chart.push([normal.next()[0], beta.next()[0]]);
            }

            $('#test-6 button').on('click', function(e) {
                if (interval == null) {
                    pushNext();
                    interval = setInterval(pushNext, 1000);
                    $(e.target).text('Pause');
                }
                else {
                    clearInterval(interval);
                    interval = null;
                    $(e.target).text('Play');   
                }
            });
        });
        </script>

        <!-- Test 7 -->
        <div id="test-7" class="test">
            <h2>7. Multi Series Color Override</h2>
            <p>
                Plot the normal distribution and the Beta(2, 5) distribution overrding normal to be in red, and beta to
                be in purple.
            </p>
            <div id="test-7-plot" class="epoch"></div>
        </div>
        
        <style>
        #test-7-plot .a rect.bucket { fill: red; }
        #test-7-plot .b rect.bucket { fill: purple; }
        </style>
        
        <script>
        $(function() {
            var normal = new NormalData(1),
                normalData = normal.history(120)[0],
                beta = new BetaData(2, 5, 1),
                betaData = beta.history(120)[0],
                interval = null;

            normalData.label = 'A';
            betaData.label = 'B';

            var chart = $('#test-7 .epoch').epoch({
                type: 'time.heatmap',
                data: [normalData, betaData],
                windowSize: 120,
                buckets: 20
            });
        });
        </script>

        <!-- Test 8 -->
        <div id="test-8" class="test">
            <h2>8. Range Independent Bucketing (<a href="https://github.com/fastly/epoch/issues/41">Issue #41</a>)</h2>
            <p>
                Discrete bucketing of sparse histogram values should produce similar looking graphs regardless
                of numeric relation between the range of the plot and the number of buckets.
            </p>
            <h3>Range [0, 100] with 20 buckets</h3>
            <div class="chart1 epoch"></div>

            <h3>Range [0, 100] with 45 buckets</h3>
            <div class="chart2 epoch"></div>
        </div>
        <script>
        $(function() {
            var normal = new NormalData(1),
                data = normal.history(120);

            console.log(data);

            $('#test-8 .chart1').epoch({
                type: 'time.heatmap',
                data: data,
                windowSize: 120,
                buckets: 20
            });
            $('#test-8 .chart2').epoch({
                type: 'time.heatmap',
                data: data,
                windowSize: 120,
                buckets: 45
            });
        });
        </script>

        <!-- Test 9 -->
        <div id="test-9" class="test">
            <h2>9. Option: buckets</h2>
            <div class="epoch"></div> 
            <p>
                <button class="playback">Play</button> |
                <button class="buckets" data-buckets="10">10 Buckets</button>
                <button class="buckets" data-buckets="20">20 Buckets</button>
                <button class="buckets" data-buckets="40">40 Buckets</button>
            </p>
        </div>
        <script>
        $(function() {
            var beta = new BetaData(2, 5, 1),
                data = beta.history(120);

            var chart = $('#test-9 .epoch').epoch({
                type: 'time.heatmap',
                data: data,
                buckets: 10
            });

            var interval = null,
                pushPoint = function () { chart.push(beta.next()); };

            $('#test-9 .playback').click(function(e) {
                if (interval == null) {
                    $(e.target).text('Pause');
                    pushPoint();
                    interval = setInterval(pushPoint, 1000);
                }
                else {
                    $(e.target).text('Play');
                    clearInterval(interval);
                    interval = null;
                }
            });

            $('#test-9 .buckets').click(function(e) {
                var buckets = parseInt($(e.target).attr('data-buckets'));
                chart.option('buckets', buckets);
            });
        });
        </script>

        <!-- Test 10 -->
        <div id="test-10" class="test">
            <h2>10. Option: bucketRange</h2>
            <div class="epoch"></div>
            <p>
                <button class="playback">Play</button> |
                <button class="bucketRange" data-bucket-range="0,100">[0, 100]</button>
                <button class="bucketRange" data-bucket-range="0,75">[0, 75]</button>
                <button class="bucketRange" data-bucket-range="0,50">[0, 50]</button>
                <button class="bucketRange" data-bucket-range="0,25">[0, 25]</button>
                <button class="bucketRange" data-bucket-range="10,75">[10,75]</button>
            </p>
        </div>
        <script>
        $(function() {
            var beta = window.beta = new BetaData(2, 5, 1),
                data = beta.history(120);

            var chart = $('#test-10 .epoch').epoch({
                type: 'time.heatmap',
                data: data,
                axes: ['left', 'right'],
                buckets: 20,
                windowSize: 100,
                cutOutliers: true
            });

            var interval = null,
                pushPoint = function () { chart.push(beta.next()); };

            $('#test-10 .playback').click(function(e) {
                if (interval == null) {
                    $(e.target).text('Pause');
                    pushPoint();
                    interval = setInterval(pushPoint, 1000);
                }
                else {
                    $(e.target).text('Play');
                    clearInterval(interval);
                    interval = null;
                }
            });

            $('#test-10 .bucketRange').click(function(e) {
                var bucketRange = $(e.target).attr('data-bucket-range')
                    .split(',').map(function(d) { return parseInt(d); });
                chart.option('bucketRange', bucketRange);
            });
        });
        </script>

        <!-- Test 11 -->
        <div id="test-11" class="test">
            <h2>11. Option: bucketPadding</h2>
            <div class="epoch"></div>
            <p>
                <button class="playback">Play</button> |
                <button class="bucketPadding" data-bucket-padding="0">Padding: 0</button>
                <button class="bucketPadding" data-bucket-padding="2">Padding: 2</button>
                <button class="bucketPadding" data-bucket-padding="4">Padding: 4</button>
                <button class="bucketPadding" data-bucket-padding="8">Padding: 8</button>
            </p>
        </div>
        <script>
        $(function() {
            var beta = window.beta = new BetaData(2, 5, 1),
                data = beta.history(120);

            var chart = $('#test-11 .epoch').epoch({
                type: 'time.heatmap',
                data: data,
                axes: [],
                buckets: 15,
                windowSize: 100
            });

            var interval = null,
                pushPoint = function () { chart.push(beta.next()); };

            $('#test-11 .playback').click(function(e) {
                if (interval == null) {
                    $(e.target).text('Pause');
                    pushPoint();
                    interval = setInterval(pushPoint, 1000);
                }
                else {
                    $(e.target).text('Play');
                    clearInterval(interval);
                    interval = null;
                }
            });

            $('#test-11 .bucketPadding').click(function(e) {
                var bucketPadding = parseInt($(e.target).attr('data-bucket-padding'));
                console.log(bucketPadding)
                chart.option('bucketPadding', bucketPadding);
            });
        });
        </script>

        <!-- Test 12 -->
        <div id="test-12" class="test">
            <h2>12. Option: cutOutliers</h2>
            <div class="epoch"></div>
            <p>
                <button class="playback">Play</button> |
                <button class="cutOutliers" data-value="false">Keep Outliers</button>
                <button class="cutOutliers" data-value="true">Cut Outliers</button>
            </p>
        </div>
        <script>
        $(function() {
            var beta = window.beta = new BetaData(2, 5, 1),
                data = beta.history(120);

            var chart = $('#test-12 .epoch').epoch({
                type: 'time.heatmap',
                data: data,
                axes: ['left', 'right'],
                bucketRange: [0, 25],
                buckets: 15,
                windowSize: 100
            });

            var interval = null,
                pushPoint = function () { chart.push(beta.next()); };

            $('#test-12 .playback').click(function(e) {
                if (interval == null) {
                    $(e.target).text('Pause');
                    pushPoint();
                    interval = setInterval(pushPoint, 1000);
                }
                else {
                    $(e.target).text('Play');
                    clearInterval(interval);
                    interval = null;
                }
            });

            $('#test-12 .cutOutliers').click(function(e) {
                var cutOutliers = $(e.target).attr('data-value') == "true" ? true : false;
                chart.option('cutOutliers', cutOutliers);
            });
        });
        </script>

        <div id="test-13" class="test">
            <h2>13. Option: opacity</h2>
            <div class="epoch"></div>
            <p>
                <button class="playback">Play</button> |
                <select class="opacity">
                    <option value="root">&radic;n</option>
                    <option value="linear" selected>n</option>
                    <option value="quadratic">n<sup>2</sup></option>
                    <option value="cubic">n<sup>3</sup></option>
                    <option value="quartic">n<sup>4</sup></option>
                    <option value="quintic">n<sup>5</sup></option>
                </select>
            </p>
        </div>
        <script>
        $(function() {
            var beta = window.beta = new BetaData(2, 5, 1),
                data = beta.history(120);

            var chart = $('#test-13 .epoch').epoch({
                type: 'time.heatmap',
                data: data,
                axes: [],
                buckets: 20,
                windowSize: 100
            });

            var interval = null,
                pushPoint = function () { chart.push(beta.next()); };

            $('#test-13 .playback').click(function(e) {
                if (interval == null) {
                    $(e.target).text('Pause');
                    pushPoint();
                    interval = setInterval(pushPoint, 1000);
                }
                else {
                    $(e.target).text('Play');
                    clearInterval(interval);
                    interval = null;
                }
            });

            $('#test-13 select.opacity').on('change', function(e) {
                var opacity = $('#test-13 select.opacity').val();
                chart.option('opacity', opacity);
            });
        });
        </script>

        <div id="test-14" class="test">
            <h2>14. Show/Hide Layer</h2>
            <div class="epoch"></div>
            <p>
                <button class="toggle" data-index="0">Toggle A</button>
                <button class="toggle" data-index="1">Toggle B</button> |
                <button class="playback">Play</button>
            </p>
        </div>
        <script>
        $(function() {
            var normal = new NormalData(1),
                normalData = normal.history(120)[0],
                beta = new BetaData(2, 5, 1),
                betaData = beta.history(120)[0],
                data = [normalData, betaData],
                interval = null;

            var chart = $('#test-14 .epoch').epoch({
                type: 'time.heatmap',
                data: data,
                windowSize: 120,
                buckets: 20
            });

            $('#test-14 .toggle').click(function(e) {
                var index = parseInt($(e.target).attr('data-index'));
                chart.toggleLayer(index);
            });

            function pushNext() {
                chart.push([normal.next()[0], beta.next()[0]]);
            }

            $('#test-14 .playback').on('click', function(e) {
                if (interval == null) {
                    pushNext();
                    interval = setInterval(pushNext, 1000);
                    $(e.target).text('Pause');
                }
                else {
                    clearInterval(interval);
                    interval = null;
                    $(e.target).text('Play');   
                }
            });
        });
        </script>
    </body>
</html>
